<template>
    <div>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="2" v-for="(item,i) in list" :key="i">
                    <div class="bg-purple">
                        <el-button type="primary" @click.native="goPath(item)">{{item.text}}</el-button>
                    </div>
                </el-col>
                <el-button type="primary" @click="handleClick()">触发地图</el-button>
            </el-row>
            <!-- <keep-alive> -->
            <div v-if="currentComponent=='world'">
                <world ref="world"></world>
            </div>
            <div v-if="currentComponent=='country'">
                <country ref="country"></country>
            </div>
            <el-row v-if="currentComponent.indexOf('guangdong')>-1">
                <el-col :span="12">
                    <guangdong ref="guangdong"></guangdong>
                </el-col>
                <el-col :span="12">
                    <guangdong1 ref="guangdong1"></guangdong1>
                </el-col>
            </el-row>

            <!-- </keep-alive> -->
        </el-main>

        
    </div>
</template>
<script>
import guangdong from "@/components/charts/guangdong";
import guangdong1 from "@/components/charts/guangdong";
import country from "@/components/charts/country";
import world from "@/components/charts/world";
export default {
    name: "mapView",
    data() {
        return {
            
            currentComponent: "country",
            list: [
                {
                    text: "全国地图",
                    path: "charts/country",
                    componentName: "country",
                },
                {
                    text: "广东地图",
                    path: "charts/guangdong",
                    componentName: "guangdong",
                },
                {
                    text: "世界地图",
                    path: "charts/world",
                    componentName: "world",
                },
            ],
        };
    },
    methods: {
        goPath(item) {
            this.currentComponent = item.componentName;
            clearInterval(this.timerId);
            this.timerId = null;
            this.$nextTick(() => {
                this.$refs[item.componentName].initChart();
                if (item.componentName.indexOf("guangdong") > -1) {
                    this.getData();
                }
            });
        },
        handleClick() {
            this.$nextTick(() => {
                this.$refs[this.currentComponent].initChart();
                if (this.currentComponent.indexOf("guangdong") > -1) {
                    this.getData();
                }
            });
        },
        getData() {
            let param = {
                data: [
                    { name: "潮州市", value: 21, label: 5 },
                    { name: "待明确地区市", value: 0, label: 0 },
                    { name: "东莞市", value: 12, label: 97 },
                    { name: "佛山市", value: 32, label: 84 },
                    { name: "广州市", value: 23, label: 346 },
                    { name: "河源市", value: 21, label: 4 },
                    { name: "惠州市", value: 12, label: 62 },
                    { name: "江门市", value: 12, label: 23 },
                    { name: "揭阳市", value: 11, label: 8 },
                    { name: "茂名市", value: 12, label: 14 },
                    { name: "梅州市", value: 12, label: 16 },
                    { name: "清远市", value: 12, label: 12 },
                    { name: "汕头市", value: 12, label: 25 },
                    { name: "汕尾市", value: 11, label: 5 },
                    { name: "韶关市", value: 12, label: 10 },
                    { name: "深圳市", value: 13, label: 417 },
                    { name: "阳江市", value: 2, label: 14 },
                    { name: "云浮市", value: 10, label: 0 },
                    { name: "湛江市", value: 12, label: 22 },
                    { name: "肇庆市", value: 12, label: 19 },
                    { name: "中山市", value: 12, label: 66 },
                    { name: "珠海市", value: 12, label: 98 },
                ],
            };
            param.data.map((item) => {
                item.value = Math.floor(Math.random() * 20);
            });
            this.$refs["guangdong1"].initChart(param);
            if (this.timerId) {
                return;
            }
            this.timerId = setInterval(() => {
                if (this.currentComponent == "guangdong") {
                    this.getData();
                }
                console.log(1);
            }, 2000);
        },
        
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs[this.currentComponent].initChart();
            if (this.currentComponent == "guangdong") {
                this.getData();
            }
        });
    },
    
    beforeDestroy() {
        clearInterval(this.timerId);
        this.timerId = null;
        return false;
    },
    components: {
        guangdong,
        guangdong1,
        country,
        world,
    },
};
</script>
